<script setup>
import { ref, toRefs, onMounted, computed } from 'vue'
import link from '../link.js'
import { unit2 } from '../unit.js'

const props = defineProps({
    config: {
        type: Object,
        default: {}
    },
});

const { config } = toRefs(props);
const itemWidth = computed(()=>{
    return unit2(100/config.value.row-3, '%')
})

// *自定义模块
// config.datatype=special为自定义选择的数据
// config.datatype=rows需要写获取商品接口方法，然后赋值到config.list

</script>

<template>

<ul class="diy-porduct flexrow justify-around">
    <li class="item-porduct" v-for="(item,index) in config.list" :key="index" @click="link(item)">
        <div class="pic" :style="{height:unit2(375/config.row-20)}">
            <img :src="item.url" class="objcover">
        </div>
        <div class="item-title flexrow">
            <h3 class="ellipsis">{{item.name}}</h3>
            <div class="price">{{item.price}}</div>
        </div>
    </li>
    <li class="item-porduct rowspace"></li>
    <li class="item-porduct rowspace"></li>
    <li class="item-porduct rowspace"></li>
    <li class="item-porduct rowspace"></li>
</ul>

</template>

<style scoped>
    .item-porduct{
        width: v-bind(itemWidth); margin-bottom: 20px; overflow: hidden;
        border: #eee 1px solid;
        border-radius: 5px;
        box-shadow: 0 16px 12px -12px rgba(0,0,0,.1), 0 2px 10px rgba(0,0,0,.07);
    }
    .pic{width: 100%;height: 150px;overflow: hidden;}
    .item-title{
        width: 100%;padding: 0.6em 1em;line-height: 1.7;
        flex-wrap: nowrap;
    }
    .item-title h3{font-size: 1em;display: block;margin: 0;}
    .item-title .price{color: #d60040;}
    .item-title .price::before{content: '￥';font-size: 0.6em;color: #666;}
    .rowspace{box-shadow: none;border: none;}
</style>